<template>
  <div class="app-container">
    <el-row class="topHeaders">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        label-width="68px"
      >
        <el-col :span="23" class="formBoxLeft">
          <el-form-item label="回访时间" class="datetimerange">
            <el-date-picker
              v-model="datePickerValue"
              :picker-options="pickerOptions"
              type="datetimerange"
              :editable="false"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              @change="selectDate"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item class="btnGroup">
            <el-col :span="1.5">
              <el-button
                v-hasPermi="['erp:reservation:export']"
                class="pan-btn yellow-btn"
                type="warning"
                icon="el-icon-download"
                size="small"
                @click="handleExports"
                >导出</el-button
              >
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="1" class="formBoxRight">
          <show-or-hide
            :params="queryParams"
            :dict="{
              clinicOptions,
              projectOptions,
              filingTime: [1],
              visitPerson: [1],
            }"
            @query="handleQuerys"
            @show="showHide"
            @reset="resetRouters"
          />
        </el-col>
      </el-form>
    </el-row>
    <el-table
      v-loading="loading"
      border
      stripe
      :data="list"
      :row-style="isGrren"
      :height="clientHeight"
      :max-height="clientHeight"
    >
      <el-table-column
        fixed="left"
        width="70"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-radio v-model="radio" class="radio" :label="scope.$index"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <columns-filter-view label="预约号">
        <el-table-column
          label="预约号"
          align="center"
          prop="reservationNumber"
          :min-width="'预约号'.length * 40"
      /></columns-filter-view>
      <columns-filter-view label="头像">
        <el-table-column
          label="头像"
          align="center"
          prop="imageUrl"
          :min-width="'头像'.length * 40"
        >
          <template slot-scope="scope">
            <avatar-image :patient="scope.row" />
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="姓名">
        <el-table-column
          label="姓名"
          align="center"
          prop="name"
          :min-width="'姓名'.length * 50"
        />
      </columns-filter-view>
      <columns-filter-view>
        <el-table-column
          label="手机号"
          align="center"
          :min-width="'手机号码'.length * 50"
        >
          <template slot-scope="scope">
            <hover-phone :items="scope.row" />
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="预约门诊"
        ><el-table-column
          label="预约门诊"
          align="center"
          prop="reservationClinic"
          :formatter="filterVisitClinic"
          :min-width="'预约门诊'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="到店状态"
        ><el-table-column
          label="到店状态"
          align="center"
          prop="reachState"
          :min-width="'到店状态'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="回访状态"
        ><el-table-column
          label="回访状态"
          align="center"
          prop="callBackState"
          :min-width="'到店状态'.length * 30"
        />
      </columns-filter-view>
      <columns-filter-view label="回访人">
        <el-table-column label="回访人" align="center" prop="followPerson" />
      </columns-filter-view>
      <columns-filter-view label="回访时间">
        <el-table-column
          label="回访时间"
          align="center"
          prop="finalVisitTime"
          :min-width="'到店状态'.length * 45"
        />
      </columns-filter-view>
      <columns-filter-view label="回访内容">
        <el-table-column
          label="回访内容"
          align="center"
          prop="reach"
          :min-width="'到店状态'.length * 30"
          :show-overflow-tooltip="true"
        />
      </columns-filter-view>
      <columns-filter-view label="预约时间">
        <el-table-column
          label="预约时间"
          align="center"
          prop="reservationVisitTime"
          :min-width="'到店状态'.length * 45"
        />
      </columns-filter-view>
      <columns-filter-view label="初诊时间">
        <el-table-column
          label="初诊时间"
          align="center"
          prop="onClinicTime"
          :min-width="'到店状态'.length * 45"
        />
      </columns-filter-view>
      <columns-filter-view label="建档人"
        ><el-table-column label="建档人" align="center" prop="filingPerson"
      /></columns-filter-view>
      <columns-filter-view label="跟进人">
        <el-table-column label="跟进人" align="center" prop="followPerson" />
      </columns-filter-view>
      <columns-filter-view label="归属人"
        ><el-table-column
          label="归属人"
          align="center"
          prop="affiliationPerson"
      /></columns-filter-view>
      <!-- <columns-filter-view label="部门"
        ><el-table-column
          label="部门"
          align="center"
          prop="yiyaMarketReservation.department"
          :min-width="'部门'.length * 30"
      /></columns-filter-view> -->
      <columns-filter-view label="建档时间">
        <el-table-column
          label="建档时间"
          align="center"
          prop="createTime"
          :min-width="'到店状态'.length * 45"
        />
      </columns-filter-view>
      <columns-filter-view label="一级渠道">
        <el-table-column
          label="一级渠道"
          align="center"
          prop="channelFirst"
          :min-width="'一级渠道'.length * 30"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.channelFirst }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="二级渠道"
        ><el-table-column
          label="二级渠道"
          align="center"
          prop="channelSecond"
          :min-width="'一级渠道'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="三级渠道">
        <el-table-column
          label="三级渠道"
          align="center"
          prop="channelThird"
          :min-width="'一级渠道'.length * 30"
      /></columns-filter-view>
      <columns-filter-view label="性别">
        <el-table-column
          label="性别"
          align="center"
          sortable
          column-key="sex"
          prop="sex"
          :formatter="(row) => formatterDict(row.sex, 'sexOptions')"
      /></columns-filter-view>
      <columns-filter-view label="年龄">
        <el-table-column label="年龄" align="center" prop="age">
          <template slot-scope="scope">
            <span>{{ scope.row.age }}</span>
          </template>
        </el-table-column>
      </columns-filter-view>
      <columns-filter-view label="访问病种"
        ><el-table-column
          :min-width="'访问病种'.length * 30"
          label="访问病种"
          align="center"
          prop="visitDisease"
      /></columns-filter-view>
      <template slot="empty">
        <empty></empty>
      </template>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="pageSizes"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listReservation,
  addReservation,
  exportReservation,
} from '@/api/erp/reservation'
import showOrHide from '@/components/yiya/showOrHide'
import market from '@/mixins/market'
import { ColumnsFilterView } from '@/components/yiya/TableColumnsFilter'
import hoverPhone from '@/components/yiya/hoverPhone'
import { mapState } from 'vuex'
import Empty from '@/components/yiya/Empty'
import avatarImage from '@/components/yiya/avatarImage'

export default {
  name: 'ReturnStatistics',
  components: {
    hoverPhone,
    showOrHide,
    ColumnsFilterView,
    avatarImage,
    Empty,
  },
  mixins: [market],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 市场回访表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'finalVisitTime',
        isAsc: 'desc',
      },
      datePickerValue: [],
    }
  },
  computed: {
    ...mapState({
      marketParams: (state) =>
        state.pathQurey['/market/returnStatistics'] || {},
    }),
  },
  watch: {
    marketParams: {
      handler(newVal) {
        if (Object.keys(newVal).length > 3) {
          this.datePickerValue = [
            newVal.startFinalVisitTime,
            newVal.endFinalVisitTime,
          ]
          this.queryParams = newVal
        }
      },
      immediate: true,
    },
  },
  methods: {
    async resetRouter() {
      this.$store.dispatch('pathQurey/setMarketQuery', {
        path: this.$route.path,
        data: this.queryParams,
      })
      await this.getList()
    },
    resetRouters(e) {
      if (e) {
        const params = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          startFinalVisitTime: this.queryParams.startFinalVisitTime,
          endFinalVisitTime: this.queryParams.endFinalVisitTime,
          orderByColumn: this.queryParams.orderByColumn,
          isAsc: this.queryParams.isAsc,
        }
        this.queryParams = params
        this.$store.dispatch('pathQurey/setMarketQuery', {
          path: this.$route.path,
          data: this.queryParams,
        })
      }
    },
    selectDate(e) {
      if (e == null) {
        this.getList()
      } else {
        if (e[0].$d !== undefined) {
          this.queryParams.startFinalVisitTime = this.parseTime(
            e[0].$d,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endFinalVisitTime = this.parseTime(
            e[1].$d,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        } else {
          this.queryParams.startFinalVisitTime = this.parseTime(
            e[0],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endFinalVisitTime = this.parseTime(
            e[1],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        }
        this.resetRouter()
      }
    },
    async handleQuerys(e) {
      if (this.datePickerValue[0].$d !== undefined) {
        e.startFinalVisitTime = this.parseTime(
          this.datePickerValue[0].$d,
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        e.endFinalVisitTime = this.parseTime(
          this.datePickerValue[1].$d,
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
      } else {
        e.startFinalVisitTime = this.parseTime(
          this.datePickerValue[0],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
        e.endFinalVisitTime = this.parseTime(
          this.datePickerValue[1],
          '{y}-{m}-{d} {h}:{i}:{s}'
        )
      }
      if (e == undefined) {
        this.resetRouter()
      } else {
        this.queryParams = Object.assign(e, this.queryParams)
        await this.resetRouter()
        if (this.queryParams.filingTime == undefined) {
          return
        } else {
          if (this.queryParams.filingTime.constructor == String) {
            this.queryParams.filingTime = this.queryParams.filingTime.split(',')
          }
        }
      }
    },
    async changeTime(e) {
      if (Object.keys(this.marketParams).length > 3) {
        this.queryParams = this.marketParams
      } else {
        if (e[0].$d !== undefined) {
          this.queryParams.startFinalVisitTime = this.parseTime(
            e[0].$d,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endFinalVisitTime = this.parseTime(
            e[1].$d,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        } else {
          this.queryParams.startFinalVisitTime = this.parseTime(
            e[0],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endFinalVisitTime = this.parseTime(
            e[1],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        }
      }
      await this.resetRouter()
      if (this.queryParams.filingTime == undefined) {
        return
      } else {
        this.queryParams.filingTime = this.queryParams.filingTime.split(',')
      }
    },
    /** 查询市场回访列表 */
    async getList() {
      this.loading = true
      await listReservation(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 导出按钮操作 */
    handleExports() {
      this.handleExport(exportReservation)
    },
    isGrren({ row, column, rowIndex, columnIndex }) {
      if (row.onClinicTime !== null) {
        return {
          color: '#32A1C8',
        }
      }
    },
  },
}
</script>

<style scoped>
@import '../static/style.scss';
</style>
